<template>
  <div class="container">
    <div class="succ-panel">
      <img src="@/assets/new-icon/成功icon.png" alt="" />
      <div class="main-text">{{ resText }}</div>
      <div class="sub-text">可在我的订单中查看订单详情</div>
      <button
        v-if="$route.query.type === 'error'"
        @click="payError"
      >返回</button>
      <button
        v-else
        @click="paySuc"
      >立即查看</button>
      <!-- <button
        v-if="$route.query.type === 'error'"
        @click="
          $router.replace({
            path: '/orders',
            query: {
              orderStatus: 2
            }
          })
        "
      >
        返回
      </button>
      <button
        v-if="$route.query.goodsType === 'represent' && $route.query.status === 2"
        @click="
          $router.replace({
            path: '/represent-orders',
            query: {
              orderStatus: 2,
              goodsType: 'represent'
            }
          })
        "
      >
        返回
      </button>
      <button
        v-else
        @click="
          $router.replace({
            path: '/orders'
          })
        "
      >
        立即查看
      </button> -->
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      resText: ""
    };
  },
  created() {
    // alert(this.$route.query.type)
    if (this.$route.query.type) {
      this.resText =
        this.$route.query.type === "error" ? "支付失败" : "支付成功";
    } else {
      this.$router.go(-1);
    }
  },
  computed: {
    ...mapState({
      service_tel: state => state.app.service_tel,
      mainColor: state => state.app.mainColor,
      shop_set: state => state.app.shop_set,
      isNeedServe: state => state.app.shop_set.server.server,
      isByServe: state => state.app.shop_set.server.is_show,
      isNeedGoods: state => state.app.shop_set.shop.shop,
      isByGoods: state => state.app.shop_set.shop.is_show,
    })
  },
  methods: {
    paySuc() {
      let that = this
      if (this.$route.query.goodsType === 'represent') {
        this.$router.replace({
            path: '/represent-orders',
            query: {
              orderStatus: 2,
              goodsType: 'represent'
            }
          })
      } else {
        this.$router.replace({
            path: '/orders',
            query: {
              orderStatus: 3,
              is_serve: that.isNeedServe ? '1' : '0'
            }
          })
      }
      
    },
    payError() {
      let that = this
      this.$router.replace({
            path: '/orders',
            query: {
              orderStatus: 2,
              is_serve: that.isNeedServe ? '1' : '0'
            }
          })
    }
  }
  
};
</script>

<style lang="less" scoped>
.container {
  background: #fff;

  .succ-panel {
    text-align: center;
    padding-top: 25vh;

    img {
      height: 3rem;
      width: 3rem;
    }

    .main-text {
      color: #444444;
      font-size: 0.64rem;
    }

    .sub-text {
      color: #999999;
      font-size: 0.56rem;
      margin: 0.64rem 0 1rem;
    }

    button {
      width: 75%;
      height: 1.6rem;
      line-height: 1.6rem;
      font-size: 0.64rem;
      color: #fff;
      border: none;
      background-color: #0084ff;
      border-radius: 0.24rem;
    }
  }
}
</style>
